<template>
  <div class="form-container">
    <!-- 头部导航 -->
    <div class="header">
      <h2>员工入职申请</h2>
    </div>

    <!-- 表单主体 -->
    <el-form :model="formRules" label-width="80px" label-position="left">
      <!-- 基本信息 -->
      <div class="form-row">
            <el-form-item label="工号">
              <el-input v-model="formData.userId" readonly></el-input>
            </el-form-item>
      </div>

      <div class="form-row">
        <el-form-item label="姓名">
          <el-input v-model="formData.name" readonly />
        </el-form-item>
        <el-form-item label="部门">
          <el-input v-model="formData.department" readonly />
        </el-form-item>
      </div>

      <!-- 职级选择 -->
      <div class="form-row">
        <el-form-item label="职级" prop="level" required>
          <el-select v-model="formData.level" placeholder="请选择">
            <el-option
                v-for="item in positions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="入职日期" prop="entryTime" required>
          <el-date-picker
              v-model="formData.entryTime"
              type="date"
              placeholder="请选择日期"
              value-format="YYYY-MM-DD"
          />
        </el-form-item>
      </div>

      <!-- 备注 -->
      <el-form-item label="备注">
        <el-input
            v-model="formData.remark"
            type="textarea"
            :rows="3"
            placeholder="请输入备注"
            maxlength="200"
            show-word-limit
        />
      </el-form-item>

      <!-- 操作按钮 -->
      <div class="action-buttons">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="saveDraft">保存</el-button>
        <el-button @click="goBack">返回</el-button>
      </div>
    </el-form>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";

// 表单数据
const formData = ref({
  userId: getUser().id,
  name: getUser().username,
  department: '产品设计部',
  level: '',
  entryTime: '',
  remark: '',
  type: '入职'
})

// 职级选项
const positions = ref([
  { value: '普通员工', label: '普通员工' },
  { value: '主管', label: '主管' },
  { value: '经理', label: '经理' },
  { value: '总监', label: '总监' },
  { value: '总裁', label: '总裁' }
])

//记录是否有草稿
let isDraft = false;
//入职时间不得早于当前时间
const validateEntryDate = (rule, value, callback)=>{
    if(value && new Date(value) >= new Date()){
        callback();
    }else{
        formData.value.entryTime='';
        callback(new Error('开始时间不得早于当前时间'));
    }
}

//定义校验规则，因为表单是使用reactive动态提交，change就会被触发
const formRules = {
    level: [{ required: true, message: '请假类型是必填项', trigger: 'change' }],
    entryTime: [{ required: true, message: '开始时间是必填项', trigger: 'change' },
        {validator: validateEntryDate, trigger: "change"}]
}


const submitForm = () => {
    let data = formData.value;
    axios.post(BASE_URL+'/v1/personnel/insert/',data)
        .then((response)=>{
            if(response.data.code == 2000){
                localStorage.removeItem("addEmployee");
                localStorage.removeItem("addEmployeeIsDraft");
                isDraft = false;
                window.history.back();
            }else {
                ElMessage.error("员工入职流程失败")
            }

        })
}

const saveDraft = () => {
    isDraft = true;
    localStorage.setItem("addEmployee",JSON.stringify(formData.value))
    localStorage.setItem("addEmployeeIsDraft",JSON.stringify(isDraft));
    window.history.back();
}

const goBack = () => {
  window.history.back()
}

onMounted(()=>{
    //判断是否有该字段，并是否为true
    if(localStorage.getItem("addEmployeeIsDraft")){
        formData.value =  JSON.parse(localStorage.addEmployee)
    }
})
</script>

<style scoped>
.form-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.header {
  margin-bottom: 24px;
  border-bottom: 1px solid #eee;
}

.sub-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

.draft-time {
  color: #666;
  font-size: 14px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 20px;
}

.action-buttons {
  margin-top: 32px;
  text-align: right;
}


:deep(.el-form-item__label)::after {
  content: '*';
  color: #ff4d4f;
  margin-left: 4px;
}

:deep(.el-button.is-link) {
  color: #1a5cff;
}
</style>